<html>
<head>
<meta name='apple-mobile-web-app-capable' content='yes' />
<title>Sky</title>
<script type="text/javascript" src="js/SolarSystem.js"></script>
<script type="text/javascript" src="js/PlanetElement.js"></script>
<script type="text/javascript" src="js/StarsView.js"></script>
<script type="text/javascript" src="js/PlanetaryPositions.js"></script>
<script type="text/javascript" src="js/NumberUtils.js"></script>
<script type="text/javascript" src="js/PlanetsAnimation.js"></script>
<script type="text/javascript" src="js/DateAndTimeDropDowns.js"></script>
<script type="text/javascript" src="js/CityCoordsMenu.js"></script>
<script type="text/javascript" src="js/PlanetBirthday.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/Tween.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="js/TweenMax.min.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/LocationInfo.js"></script>
<script type="text/javascript" src="js/UIElements.js"></script>
<script type="text/javascript" src="js/geom/Point.js"></script>
<script type="application/x-javascript">
	
</script>
<link rel="stylesheet" type="text/css" href="css/simpleOrrery.css" />
<!--<link href='http://fonts.googleapis.com/css?family=Nova+Mono' rel='stylesheet' type='text/css'>-->
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->
<script type="text/javascript">
	function getLocation(){
		if (navigator.geolocation){
			navigator.geolocation.getCurrentPosition(showPosition, showError);
		} else {
			init();
		}
	}
	function showPosition(position){
		CityCoordsMenu.cities.unshift(["Current location", "Lat:"+NumberUtils.fixedLengthDecimal(position.coords.latitude,3)+", Lon:"+NumberUtils.fixedLengthDecimal(position.coords.longitude,3), position.coords.latitude, position.coords.longitude]);
		CityCoordsMenu.currentIsDefault = true;
		PlanetaryPositions.latitude = position.coords.latitude;
		PlanetaryPositions.longitude = position.coords.longitude;
		init();
	}
	function showError(error)
	{
		init();
		switch(error.code) 
		{
			case error.PERMISSION_DENIED:
				console.log("User denied the request for Geolocation.")
			break;
			case error.POSITION_UNAVAILABLE:
				console.log("Location information is unavailable.")
			break;
			case error.TIMEOUT:
				console.log("The request to get user location timed out.")
			break;
			case error.UNKNOWN_ERROR:
				console.log("An unknown error occurred.")
			break;
		}
	}
	//getLocation();
	function init(){
		TweenPlugin.activate([CSSPlugin])
		//TWEEN.start();
		var datdd = new DateAndTimeDropDowns(document.getElementById("formContainer"), "form0");
		CityCoordsMenu.populate(document.getElementById("form0"), "cities");
		new NumberUtils();
		new CityCoordsMenu();
		new PlanetBirthday();
		var trackInterval = null;
		var trackFrequency = 60000;
		var trackCurrentDate = null;
		var sv = new StarsView();
		var ssv = new SolarSystem();
		var uiElements
		
		ssv.setOnLoadComplete(imagesLoaded);
		PlanetsAnimation.POLE = PlanetaryPositions.latitude < 0 ? PlanetsAnimation.SOUTH : PlanetsAnimation.NORTH;
		var p = new PlanetsAnimation()
		var date = new Date();
		
		// build the canvas element
		ssv.makeCanvas(document.getElementById("sky"), 1000, 920)
		
		
		var locationInfo = new LocationInfo();
		var coordsObj = {}
		locationInfo.latitude = PlanetaryPositions.latitude;
		locationInfo.longitude = PlanetaryPositions.longitude;

		var cityChanged = false;

		function imagesLoaded(){
			//do the solar system
			ssv.makeHitElements(document.getElementById("sky"));
			p.azimuthAltitude(date, SolarSystem.elements);
			ssv.positionElements();
			//do the stars
			//sv = 
			//document.getElementById("sky").appendChild(sv.createHitStars());
			sv.positionStars(date)
			uiElements = new UIElements(document.getElementById('container'), sv);
			console.log(uiElements.toString())

			//document.getElementById('skyClick').onclick = uiElements.celestialBodyOver;
			//document.getElementById('stars').onclick = uiElements.celestialBodyOver;
			//document.getElementById('solar_system').onclick = uiElements.celestialBodyOver;
			document.getElementById('solarSystemCanvas').onclick = uiElements.celestialBodyOver;
			//document.getElementById('solarSystemCanvas').onclick = uiElements.solarBodyOut;
			//update everything
			update();
			//start tracking
			startTrack();
		}

//////////////////////////////
		/*
		 * 
		 * added by tom, plant rollovers
		 *
		*/
		// //create rollover graphic
		// var rollOverBox = createRollOverBox();
		// TweenLite.to(rollOverBox, 0, {css:{autoAlpha:0}, ease:Sine.easeInOut});
		// var lastId = "";
		// var boxIsVisible = false;
		
		// function createRollOverBox(){
		// 	var newdiv = document.createElement('div');
		// 	// var t = document.createTextNode("<b><font size='6' color='#ff9900'>Hello");
		// 	// newdiv.appendChild(t);
		// 	// newdiv.text = t;
		// 	document.getElementById('sky').appendChild(newdiv);
		// 	newdiv.setAttribute('id', 'rolloverbox');
		// 	//newdiv.style.position = 'absolute';
		// 	//newdiv.style.backgroundColor = '#1d1d19';
		// 	//newdiv.style.border = '5px solid #333333'
		// 	// newdiv.style.visibility = 'visible';
		// 	// newdiv.style.zIndex = 20000;
		// 	// newdiv.style.fontFamily = 'verdana';//Nova Mono, cursiv';
		// 	// newdiv.style.color='white';
		// 	// newdiv.style.textAlign = 'left';
		// 	// newdiv.style.padding = '5px 10px 10px 10px';
		// 	// newdiv.style.width = 'auto';
		// 	return newdiv;
		// }
		
		// //rollover listener	
		
		// //show rollover box
		// function setRolloverBoxText(cb){
		// 	$(rollOverBox).html("<span class='rolloverBoxHeading'>"+cb.name+
		// 		"</span><br><span class='rolloverBoxDetails'>Right ascension: </span><span class='rolloverBoxNumber'>"+NumberUtils.fixedLengthDecimal(cb.RA, 3)+
		// 		"</span><br><span class='rolloverBoxDetails'>Declination: </span><span class='rolloverBoxNumber'>"+NumberUtils.fixedLengthDecimal(cb.Dec, 3)+
		// 		"</span><br><span class='rolloverBoxDetails'>Altitude: </span><span class='rolloverBoxNumber'>"+NumberUtils.fixedLengthDecimal(cb.altitude, 3)+
		// 		"</span><br><span class='rolloverBoxDetails'>Azimuth: </span><span class='rolloverBoxNumber'>"+NumberUtils.fixedLengthDecimal(cb.azimuth, 3)+"</span>")
		// }
		// function solarBodyOver(event){
		// 	var objectId = event.target.id;
		// 	if(lastId == objectId && boxIsVisible) {
		// 		//rollOverBox.style.visibility = 'hidden';
		// 		hideBox()
		// 		lastId = "";
		// 		return;
		// 	}			
		// 	hideBox();
		// 	if(objectId != 'solar_system' && objectId != 'rolloverbox' && objectId != 'stars'){

		// 		var  planetDiv = event.target;
		// 		var planet = SolarSystem.getCanvasElement(objectId);
		// 		setRolloverBoxText(planet)
		// 		positionOverBox(planet);
				
		// 		//rollOverBox.style.visibility = 'visible';
		// 		showBox()
		// 	} else {
		// 		hideBox();
		// 	}
		// 	lastId = objectId;
		// }
		// function starOver(event){
		// 	var objectId = event.target.id;
		// 	if(lastId == objectId && boxIsVisible) {
		// 		//rollOverBox.style.visibility = 'hidden';
		// 		hideBox();
		// 		lastId = "";
		// 		return;
		// 	}

		// 	hideBox();
		// 	if(objectId != 'solar_system' && objectId != 'rolloverbox' && objectId != 'stars'){
		// 		var  planetDiv = event.target;
		// 		var star = sv.getStar(objectId);

		// 		setRolloverBoxText(star)
		// 		positionOverBox(star);
		
		// 		//rollOverBox.style.visibility = 'visible';
		// 		showBox()
		// 	} else {
		// 		hideBox();
		// 	}
		// 	lastId = objectId;
		// }
		// function positionOverBox(element){
		// 	var xPos = element.x+SolarSystem.canvas.width/2;
		// 	var yPos = element.y+SolarSystem.canvas.height/2;
		// 	var boxSize = UIElements.getElementTotalDimensions(rollOverBox);
		// 	if(xPos+boxSize.width > SolarSystem.canvas.width) xPos -= boxSize.width;
		// 	if(yPos+boxSize.height > SolarSystem.canvas.height) yPos -= boxSize.height;
		// 	rollOverBox.style.top = yPos;
		// 	rollOverBox.style.left = xPos;
		// }
		// function showBox(){
		// 	boxIsVisible = true;
		// 	UIElements.showElement(rollOverBox)
		// 	//TweenLite.to(rollOverBox, 0.25, {css:{autoAlpha:1}, ease:Sine.easeInOut});
		// }
		// function hideBox(){
		// 	boxIsVisible = false;
		// 	UIElements.hideElement(rollOverBox)
		// 	//TweenLite.to(rollOverBox, 0.25, {css:{autoAlpha:0}, ease:Sine.easeInOut});
		// }
		// function getInt(value){
		// 	return !value ? 0 : parseInt(value);
		// }
		// function getElementTotalDimensions(element){
		// 	var el = $(element)
		// 	var o = {}
		// 	o.width = el.width()
		// 		+getInt(el.css('marginLeft'))
		// 		+getInt(el.css('marginRight'))
		// 		+getInt(el.css('borderLeftWidth'))
		// 		+getInt(el.css('borderRightWidth'))
		// 		+getInt(el.css('paddingLeft'))
		// 		+getInt(el.css('paddingRight'));
		// 	o.height = $(el).height()
		// 		+getInt(el.css('marginTop'))
		// 		+getInt(el.css('marginBottom'))
		// 		+getInt(el.css('borderTopWidth'))
		// 		+getInt(el.css('borderBottomWidth'))
		// 		+getInt(el.css('paddingTop'))
		// 		+getInt(el.css('paddingBottom'));
		// 	return o;
		// }
		//hide rollover box
		//document.getElementById('solar_system').onmouseout = solarBodyOut;
		//document.getElementById('stars').onmouseout = solarBodyOut;	
		// function solarBodyOut(event){
		// 	var objectId = event.target.id;
		// 	if(objectId != 'solar_system' && objectId != 'rolloverbox' && objectId != 'stars'){
		// 		//rollOverBox.style.visibility = 'hidden';
		// 		hideBox()
		// 	}
		// }
		////////////////////////////



		function doTween() {
			TweenLite.to(locationInfo, 6, { time : locationInfo.time + (86400000), ease:Cubic.easeInOut, onStart:tweenStart, onUpdate:update, onComplete:tweenComplete});

		}

		//document.getElementById('solar_system').onclick = solarSystemClick;
		function solarSystemClick(event){
			var planetId = event.target.parentNode.id
			switch (planetId){
				case "sun" :
					tweenToNewDate(new Date().getTime());
					locationInfo.time = date.getTime();
				break;
				case "bg" :
				
				break;
				default :
					doTween()
				break;
			}
			
		}

		document.getElementById('cities').onchange = function(){
			cityChanged = true;
			tweenToFormDate();
		}
		document.getElementById('nowDate').onclick = setToTimeNow;
		function setToTimeNow(){
			console.log("NOW!")
			tweenToNewDate(new Date().getTime());
		}
		document.getElementById('goDate').onclick = tweenToFormDate;
		function tweenToFormDate() {
			clearInterval(trackInterval);
			var form = document.getElementById('form0');
			var coords = CityCoordsMenu.coords(form.cities.value)
			if(cityChanged){
				var newTime = new Date().getTime();
				datdd.resetDateAndTime(new Date())
				cityChanged = false;
			} else {
				var newTime = new Date(form.year.value, form.month.value,form.day.value, form.hours.value, form.minutes.value).getTime();
			}
			if(newTime == locationInfo.time) {
				newTime += new Date().getSeconds();
				console.log("same time - ")
			}
			tweenToNewDate(newTime, Number(coords[0]), Number(coords[1]));
		}
		function tweenToNewDate(newTime, pLatitude, pLongitude) {
			//tweenStart();
			//TWEEN.removeAll();
			if(pLatitude != null && pLongitude != null){
				//new TWEEN.Tween(locationInfo).to({ time : newTime, latitude : pLatitude, longitude: pLongitude}, 6000).easing(TWEEN.Easing.Cubic.EaseInOut).onComplete(tweenComplete).onUpdate(update).start();
				TweenLite.to(locationInfo, 6, { time : newTime, latitude : pLatitude, longitude: pLongitude, ease:Cubic.easeInOut, onStart:tweenStart, /*onUpdate:update,*/ onComplete:tweenComplete});
			} else {
				//new TWEEN.Tween(locationInfo).to({ time : newTime}, 6000).easing(TWEEN.Easing.Cubic.EaseInOut).onComplete(tweenComplete).onUpdate(update).start();
				TweenLite.to(locationInfo, 6, { time : newTime, ease:Cubic.easeInOut, onStart:tweenStart, onUpdate:update, onComplete:tweenComplete});
			}

		}
		function tweenStart() {
			UIElements.hideBox();
			//document.getElementById('solar_system').style.visibility = 'hidden';
			//document.getElementById('stars').style.visibility = 'hidden';
		}
		function positionHits(){
			var date = new Date(locationInfo.time)
			p.azimuthAltitude(date, SolarSystem.elements);
			ssv.positionElements();
			sv.positionStars(date);
		}
		function tweenComplete() {
			positionHits()
			//document.getElementById('solar_system').style.visibility = 'visible';
			//document.getElementById('stars').style.visibility = 'visible';
			startTrack();
		}
		function startTrack(){
			trackCurrentDate = new Date();
			clearInterval(trackInterval);
			trackInterval = setInterval(track, trackFrequency);
		}
		function track(){
			var trackDateDiff = new Date().getTime() - trackCurrentDate.getTime()
			locationInfo.time += trackDateDiff;
			var date = new Date(locationInfo.time);
			trackCurrentDate = date;
			datdd.resetDateAndTime(date);
			positionHits()
			update()
		}
		function loop(){
			window.requestAnimationFrame(loop)
			update()
		}
		loop();
		function update() {
			PlanetaryPositions.latitude = locationInfo.latitude;
			PlanetaryPositions.longitude = locationInfo.longitude;
			var newT = locationInfo.time;
			p.azimuthAltitude(new Date(newT), SolarSystem.canvasElements);
			ssv.drawCanvasBG()
			SolarSystem.starCanvasElements = sv.starsFiltered;
			ssv.positionCanvasElements(new Date(newT));
		};
	};
	</script>
</head>
<body onLoad="getLocation()">

</script>

<div id="container">
	<div id="header">
		<div id="formContainer">

		</div>

		<div id="dateOut"></div>
	</div>
	<div id="sky">
	</div>
</div>
<div id="clearfloat"></div>

</body>
</html>